<template>
  <view class="page-container">
    <button class="get-avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
      <image v-if="avatar_id || avatar" class="my-avatar" :src="avatar"/>
      <image v-else class="my-avatar" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/dang/default-photo.png"/>
      <text class="hint-text">授权获取头像</text>
    </button>

    <view class="get-nickname">
      <text class="prefix-title">昵称</text>
      <input class="nickname-input" :placeholder-style="placeholderStyle"
            @change="handleChange" v-model="formData.nick_name"
             type="nickname" placeholder="请输入昵称" />
    </view>

    <view class="update-btn" @click="handleUpdate">更新</view>
  </view>
</template>

<script>
import {mapState} from 'vuex'
import {UPLOAD_IMG} from "../../api";

export default {
  name: 'perfect',
  data() {
    return {
      user_token: '',
      avatar:'',
      nick_name:"",
      placeholderStyle: 'color: #999;',
      formData: {
        nick_name: '',
        photo_id: ''
      },
      avatar_id:'',
    }
  },

  computed: {
    ...mapState({})
  },

  onLoad() {
    this.getUserInfo()
  },

  methods: {

    async getUserInfo() {
      let params = {
        user_token: uni.getStorageSync('userToken'),
      }
      let res = await this.$api.getSimpleUserInfo(params);
      if (res.data.level == "success") {
        let userInfo = res.data.data
        this.formData.nick_name = userInfo.nickname
        this.formData.photo_url = userInfo.photo_url
        this.photo_id = userInfo.photo_id
      }
    },

    chooseAvatar({detail}) {
      this.uploadImage(detail.avatarUrl)
    },

    handleChange(e) {
      this.formData.nick_name = e.detail.value
    },

    uploadImage(path) {
      try {
        uni.showLoading()
        wx.uploadFile({
          url: this.$api.UPLOAD_IMG,
          filePath: path,
          name: 'photo',
          success: res => {
            const {data} = JSON.parse(res.data)
            this.formData.photo_id = data.id
            console.log(data,'****')
            this.avatar = data.img_url
            uni.hideLoading()
          },
          fail: err => {
            uni.hideLoading()
            console.error(err.errMsg)
          }
        })
      } catch (e) {
        uni.hideLoading()
      }
    },


    async handleUpdate() {
      if (this.formData.avatar === '') {
        uni.showToast({
          title:'请上传用户头像', type:'error', duration:1500
        })
        return
      }
      if (this.formData.nick_name === '') {
        uni.showToast({
          title:'请填写用户昵称', type:'error', duration:1500
        })
        return
      }

      try {
        uni.showLoading()
        /**
         * 2024
         * 用setUserInfo接口把头像与昵称更新到用户信息里
         * index页面在getSimpleUserInfo接口的nickname拿到昵称，photo_url拿到头像
         * */
        // console.log("nickname",this.formData)
        let params = {
              photo_id:this.formData.photo_id,
              nick_name:this.formData.nick_name,
              user_token: uni.getStorageSync('userToken'),
            }
        uni.hideLoading()
        const res = await this.$api.setUserNickname(params)
        const {data, level} = res.data
        uni.hideLoading()
        if (level === 'success') {
          uni.showToast({
            title:'更新完成', type:'success', duration:1500
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (e) {
        uni.hideLoading()
      }

    },
  },
}
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  height: 100vh;
  padding: 40rpx 30rpx 0;
  background: url("https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/dang/login_background.png") no-repeat;
  background-size: 100% 100%;

  .get-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    background-color: transparent;
    padding-top: 20rpx;

    .my-avatar {
      display: block;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
    }

    .hint-text {
      color: #000;
      font-weight: 700;
      font-size: 28rpx;
    }
  }

  .get-nickname {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    padding: 40rpx 0;
    margin-top: 40rpx;
    color: #333;
    font-size: 28rpx;
    border: 2rpx solid #e6e6e6;

    .prefix-title {
      color: #333;
      font-size: 28rpx;
    }

    .nickname-input {
      //color:
    }
  }

  .update-btn {
    $height: 78rpx;
    position: absolute;
    left: 17.5%;
    bottom: 10%;
    width: 65%;
    height: $height;
    background-color:#e21918;
    line-height: $height;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    transition: background-color .15s;

    &:active {
      background-color: #bf6245;
    }
  }
}
</style>
